﻿@*
  网页导航栏与底部  
*@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - 餐饮_企划</title>
    <link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/boot5_index.css" />
    <link rel="stylesheet" href="~/css/Layout.css" />
</head>
<body>
    <!-- 背景图片设置（已取消，现已使用body属性设置背景图片）-->
    <div>
        <!--  使用栅格网格设置最顶层的元素显示-->
        <!--  顶部信息显示-->
        <!--  使用fixed-top属性使得顶栏元素不随滚动条移动  -->
        <div class="container-full fixed-top" style="height: 100px;background-color: #1c1f23">
            <div class="row">
                <div class="col-sm-3" style="margin-left: 100px"><img src="img/LOGO2.png" alt=""></div>
                <!-- 使用 offset-sm-1 让表单元素向右偏移 2 列 -->
                <div class="col-sm-3 offset-sm-2 pt-4 mt-2">
                    <form action="/Home/Select_name" method="get">
                        <div class="input-group">
                            <label for="demo"></label>
                            <input class="form-control input-lg" id="cai_name" name="cai_name" placeholder="请输入菜品名" type="text" value="宫保鸡丁">
                            <button class="input-group-text">搜索</button>
                        </div>
                    </form>
                </div>
                <!-- 调整登录元素的列宽度和偏移 -->
                <div class="col-sm-2 pt-4 mt-2">
                    <a href="~/home/Login" class="nav-link"><span class="text-danger">登录</span></a>
                </div>
            </div>
        </div>

        <!--    导航栏设置样式  大小，背景，文字反色-->
        <!-- 使用fixed-top属性使得顶栏元素不随滚动条移动  此处增加了margin-top元素，是导航栏显示在顶部信息栏的下方-->
        <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top" style="margin-top: 100px">
            <!--        布局容器 以bootstrap5中的container样式  -->
            <div class="container fs-5">
                <img src="img/logo1.png" alt="">
                <a href="~/home/Menu" class="navbar-brand fs-4">餐饮企划</a>

                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav_menu">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div style="width: 400px"></div>

                <!-- 格式化快捷键 Ctrl+Alt+L  -->
                <!--  总结：Bootstrap 5 的下拉菜单可以使用 <div> 作为触发元素，只需确保正确设置 data-bs-toggle="dropdown" 属性。
            下拉菜单的内容需要放在 <div class="dropdown-menu"> 中。方法灵活，适用于各种场景，尤其是在需要自定义触发元素时。-->
                <!-- 导航栏的右侧的八大菜系，添加下拉菜单栏，列举详细的菜名-->
                <div class="collapse navbar-collapse" id="nav_menu">
                    <ul class="navbar-nav ms-auto">
                        <!-- margin start  = margin-left -->

                        <li class="nav-item">
                            <div class="nav-link dropdown-toggle"
                                 role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                鲁菜
                            </div>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">123</a>
                                <div class="dropdown-divider"></div>    <!--下拉菜单的水平分割线-->
                                <a class="dropdown-item" href="#">456</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">789</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <div class="nav-link dropdown-toggle"
                                 role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                徽菜
                            </div>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Action</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Another action</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <div class="nav-link dropdown-toggle"
                                 role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                粤菜
                            </div>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">123</a>
                                <div class="dropdown-divider"></div>    <!--下拉菜单的水平分割线-->
                                <a class="dropdown-item" href="#">456</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">789</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <div class="nav-link dropdown-toggle"
                                 role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                湘菜
                            </div>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">123</a>
                                <div class="dropdown-divider"></div>    <!--下拉菜单的水平分割线-->
                                <a class="dropdown-item" href="#">456</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">789</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <div class="nav-link dropdown-toggle"
                                 role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                川菜
                            </div>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">123</a>
                                <div class="dropdown-divider"></div>    <!--下拉菜单的水平分割线-->
                                <a class="dropdown-item" href="#">456</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">789</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <div class="nav-link dropdown-toggle"
                                 role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                苏菜
                            </div>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">123</a>
                                <div class="dropdown-divider"></div>    <!--下拉菜单的水平分割线-->
                                <a class="dropdown-item" href="#">456</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">789</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <div class="nav-link dropdown-toggle"
                                 role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                闽菜
                            </div>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">123</a>
                                <div class="dropdown-divider"></div>    <!--下拉菜单的水平分割线-->
                                <a class="dropdown-item" href="#">456</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">789</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <div class="nav-link dropdown-toggle"
                                 role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                浙菜
                            </div>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">123</a>
                                <div class="dropdown-divider"></div>    <!--下拉菜单的水平分割线-->
                                <a class="dropdown-item" href="#">456</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">789</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <div class="nav-link dropdown-toggle"
                                 role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                菜单管理
                            </div>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="~/home/Add">添加菜单</a>
                                <div class="dropdown-divider"></div>    <!--下拉菜单的水平分割线-->
                                <a class="dropdown-item" href="~/home/Menu">菜单列表</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <div class="nav-link dropdown-toggle"
                                 role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                用户管理
                            </div>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="~/user/Add">添加用户</a>
                                <div class="dropdown-divider"></div>    <!--下拉菜单的水平分割线-->
                                <a class="dropdown-item" href="~/user/Index">用户列表</a>
                            </div>
                        </li>
                    </ul>


                </div>
            </div>


        </nav>
        </div>



        <!--  网页除去 顶部导航栏与底部导航栏后的  主体页面  -->
        <div class="container-full">
            @RenderBody()
        </div>



        <!--  导航栏底部  -->
        <footer class="border-top footer text-muted">
            <div class="container-full text-center pb-2 pt-2" style="background-color: cadetblue">
                &copy; 2025 - 餐饮_企划 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
            </div>
        </footer>
        <script src="~/lib/jquery/dist/jquery.min.js"></script>
        <script src="~/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="~/js/bootstrap.js"></script>
        @RenderSection("Scripts", required: false)
</body>
</html>
